<template>
  <div class="aside" style="width: 100%;">
    <el-menu router :style="{height: height}"
             active-text-color="#4caf50"
             background-color="#000000"
             class="el-menu-vertical-demo"
             default-active="2"
             text-color="#fff"
             @open="handleOpen"
             @close="handleClose"
             :collapse="false"
    >
      <el-menu-item index="/home">
        <el-icon>
          <HomeFilled/>
        </el-icon>
        <span>Home</span>
      </el-menu-item>

      <!--      <el-sub-menu index="1">-->
      <!--        <template #title>-->
      <!--          <el-icon>-->
      <!--            <Menu/>-->
      <!--          </el-icon>-->
      <!--          <span>Custom Chart</span>-->
      <!--        </template>-->
      <!--        <el-menu-item index="/pieColumnTwoLevel">Two Level Associate</el-menu-item>-->
      <!--        <el-menu-item index="/pieColumnThreeLevel">Three Level Associate</el-menu-item>-->

      <!--        <el-menu-item index="/histogram/rect">Histogram ( rect )</el-menu-item>-->
      <!--        <el-menu-item index="/histogram/line">Histogram ( line )</el-menu-item>-->
      <!--        <el-menu-item index="/histogram/multiple">Histogram ( multiple )</el-menu-item>-->
      <!--        <el-menu-item index="/boxPlot">Box Plot</el-menu-item>-->
      <!--        <el-menu-item index="/volcanoPlot">Volcano Plot</el-menu-item>-->


      <!--      </el-sub-menu>-->

      <div v-for="subMenu in menuList.children" :key="subMenu.name">
        <el-sub-menu v-if="subMenu.children" :index="subMenu.name">
          <template #title>
            <el-icon>
              <SvgIcon :iconName="subMenu.icon"/>
            </el-icon>
            <span>{{ subMenu.name }}</span>
          </template>
          <el-menu-item v-for="menuItem in subMenu.children" :key="menuItem" :index="menuItem.path">{{
              menuItem.name
            }}
          </el-menu-item>

        </el-sub-menu>

        <el-menu-item v-else :index="subMenu.path">
          <el-icon>
            <SvgIcon :iconName="subMenu.icon"/>
          </el-icon>
          <span>{{ subMenu.name }}</span>
        </el-menu-item>


      </div>

    </el-menu>

  </div>
</template>

<script setup>
import {HomeFilled} from '@element-plus/icons-vue'
import {computed} from "vue";
import menuList from "@/mock/menu_tree.json"

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

const height = computed(() => {
  console.log(window.offsetHeight)
  return window.innerHeight - 68 + 'px'
})
console.log(height.value)


</script>

<style scoped>

</style>
